<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="opening-container">
				<view class="title">万事具备，马上开业！</view>
				<view class="title">预祝老板生意兴隆，财源滚滚！</view>
				<view class="picture">
					<image src="https://i.postimg.cc/g0jGrpFQ/kaiye.jpg" mode="widthFix" @load="imageLoaded"></image>
				</view>
				<view class="remark">
					备注：开业后，店铺设置为营业状态，用户可通过小程序扫码下单开台。
				</view>
				<view class="open-btn">
					<view class="btn" @tap="openingSubmit">开业</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageOpc:0,
				imgLoaded:false,
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		watch:{
			imgLoaded:{
				handler(newVal){
					if(!newVal){
						uni.showLoading({
							title: '加载中'
						})
					}else{
						uni.hideLoading()
					}
				},
				immediate:true
			}
		},
		methods:{
			imageLoaded(){
				this.imgLoaded=true
			},
			openingSubmit(){
				this.$request.post(this.$api.opening, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast(res.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.opening-container{
		padding: 40rpx;
		.title{
			font-size: 40rpx;
			font-weight: bold;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
		}
		.picture{
			margin-top: 20rpx;
		}
		.remark{
			margin-top: 20rpx;
			font-size: 26rpx;
			color: rgba(255, 255, 255, .7);
			line-height: 36rpx;
		}
		.open-btn{
			width: 100%;
			position: absolute;
			bottom: 88rpx;
			left: 0;
			.btn{
				width: 600rpx;
				height: 90rpx;
				margin: 0 auto;
				background: rgb(31, 124, 247);
				border-radius: 72rpx;
				font-size: 40rpx;
				font-weight: bold;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>